<template>
  <view class="address-manage rf-row-wrapper">
    <view class="row b-b">
      <text class="tit-text">姓名</text>
      <input
        class="input"
        type="text"
        v-model="merchant.name"
        placeholder="请输入姓名"
        placeholder-class="placeholder"
      />
    </view>
    <view class="row b-b">
      <text class="tit-text">手机号码</text>
      <input
        class="input"
        type="number"
        v-model="merchant.phone"
        placeholder="请输入手机号码"
        placeholder-class="placeholder"
      />
    </view>
    <view class="row b-b">
      <text class="tit-text">身份证号</text>
      <input
        class="input"
        type="number"
        v-model="merchant.id_card"
        maxlength="18"
        placeholder="请输入身份证号"
        placeholder-class="placeholder"
      />
    </view>
    <view class="row b-b">
      <text class="tit-text">详细地址</text>
      <input
        class="input"
        type="text"
        v-model.trim="merchant.address"
        placeholder="请输入详细地址"
        placeholder-class="placeholder"
      />
      <image :src="icon_weizhi" class="icon_weizhi" @tap="openMapRoute"></image>
    </view>
    <view class="split-border"> </view>
    <view class="row b-b" @tap="show = 'show'">
      <text class="tit-text">主营产品</text>
      <input
        class="input"
        type="text"
        v-model="merchant.basic"
        placeholder="请选择（可多选）"
        placeholder-class="placeholder"
      />
    </view>
    <view class="text-area b-b">
      <text class="tit-text">备注</text>
      <view class="beizhu">
        <textarea
          name=""
          v-model="merchant.address_details"
          id=""
          style="height: 130upx"
          placeholder="请输入备注信息"
          placeholder-class="placeholder"
        ></textarea>
      </view>
    </view>
    <view
      class="row b-b"
      @tap="showSinglePicker"
      v-if="pickerValueArray.length > 0"
    >
      <text class="tit-text">员工工号</text>
      <text class="input">{{
        merchant.staff_name == "" ? "请选择员工姓名(必填)" : merchant.staff_name
      }}</text>
    </view>
    <view class="row default-row"> </view>
    <button
      class="add-btn"
      :class="'bg-' + themeColor.name"
      :disabled="btnLoading"
      :loading="btnLoading"
      @tap="confirm"
    >
      提交审核
    </button>
    <prductPopup
      :list="prductList"
      :value="show"
      @closepop="closepop"
    ></prductPopup>
    <rf-picker
      :themeColor="themeColor.color"
      ref="companyTypePicker"
      mode="selector"
      :deepLength="1"
      @onConfirm="onCompanyConfirm"
      :pickerValueArray="pickerValueArray"
    />
    <!--加载动画-->
    <rfLoading isFullScreen :active="loading"></rfLoading>
  </view>
</template>

<script>
import { business, getBasic, getStaff } from "@/api/login";
import rfPicker from "@/components/rf-picker";
import prductPopup from "@/components/prduct-popup/index";
export default {
  components: {
    prductPopup,
    rfPicker,
  },
  data() {
    return {
      show: "none",
      merchant: {
        name: "",
        phone: "",
        id_card: null,
        address: "",
        basic: "",
        staff_name: "",
        staff_id: null,
        latitude: null,
        longitude: null,
      },
      pickerValueArray: [],
      prductList: [],
      btnLoading: false,
      icon_weizhi: this.$mAssetsPath.icon_weizhi,
      multiArray: [[], [], []],
      multiIndex: [0, 0, 0],
      loading: true,
    };
  },
  onLoad(options) {
    this.initData(options);
  },
  // #ifndef MP
  onNavigationBarButtonTap(e) {
    this.$mRouter.push({ route: "/pages/user/address/guide" });
  },
  // #endif
  methods: {
    onCompanyConfirm(e) {
      this.merchant.staff_name = e.label;
      this.merchant.staff_id = e.value[0];
    },
    // 选择员工
    showSinglePicker() {
      this.$refs.companyTypePicker.show();
    },
    closepop(list) {
      this.show = "none";
      if (list && list.length > 0) {
        this.merchant.basic = list
          .map(function (obj, index) {
            return obj.name;
          })
          .join(",");
      }
      console.log(list);
    },
    //获取主营商品
    async getBasic() {
      await this.$http
        .get(`${getBasic}`)
        .then((res) => {
          res.data.forEach((element) => {
            element.check = false;
          });
          this.prductList = res.data;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    //获取所有员工的接口
    async getStaff() {
      await this.$http
        .get(`${getStaff}`)
        .then((res) => {
          console.log(res);
          res.data.forEach((item) => {
            this.pickerValueArray.push({
              label: item.name,
              value: item.id,
            });
          });
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 数据初始化
    async initData(options) {
      this.getBasic();
      this.getStaff();
      this.manageType = options.type;
    },
    // 提交
    confirm() {
      const cheRes = this.$mGraceChecker.check(
        this.merchant,
        this.$mFormRule.merchantRule
      );
      if (!cheRes) {
        this.$mHelper.toast(this.$mGraceChecker.error);
        return;
      }
      this.btnLoading = true;
      if (!this.merchant.id_card) {
        delete this.merchant.id_card;
      }
      this.handleAddressCreate(this.merchant);
    },
    async handleAddressCreate(data) {
      await this.$http
        .post(`${business}`, {
          name: data.name,
          phone: data.phone,
          address: data.address,
          id_card: data.id_card,
          basic: data.basic,
          staff_id: Number(data.staff_id),
          longitude: data.longitude.toString(),
          latitude: data.latitude.toString(),
        })
        .then(() => {
          this.btnLoading = false;
          this.$mHelper.toast("商家入驻成功！");
          this.$mRouter.back();
        })
        .catch(() => {
          this.btnLoading = false;
        });
    },
    openMapRoute() {
      let that = this;
      uni.chooseLocation({
        success: function (res) {
          that.merchant.address = res.address;
          that.merchant.latitude = res.latitude;
          that.merchant.longitude = res.longitude;
          console.log("纬度：" + res.latitude);
          console.log("经度：" + res.longitude);
        },
        fail: function () {
          uni.showToast({
            title: "获取地址失败，将导致部分功能不可用",
            icon: "none",
          });
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #fff;
}
.address-manage {
  border-top: 1upx solid #eeeeee;
  .tit-text {
    font-size: 28upx;
    width: 120upx;
    margin-right: 30upx;
    font-weight: 500;
  }
  .icon_weizhi {
    width: 30upx;
    height: 36upx;
  }
  .row {
    margin: 0 30upx;
    height: 100upx;
    line-height: 100upx;
  }
  .text-area {
    padding: 30upx 30upx 0 30upx;
    margin: 0 30upx;
    border-bottom: 1upx solid #eeeeee;
    .beizhu {
      margin-top: 30upx;
    }
  }
  .split-border {
    background: #f9f9f9;
    height: 18upx;
  }
  .add-btn {
    background: #f91c1c;
    border-radius: 40upx;
    font-size: 30upx;
    font-family: PingFang SC;
    font-weight: 500;
  }
}
</style>